@import '@/var.scss';

.h-cascader {
  font-size: 16px;
  width: fit-content;
  position: relative;
  &:not(.h-disabled) .h-cascader-input:hover {
    border-color: $green;
    .arrow-down path {
      fill: $green;
    }
  }
  .h-cascader-input {
    padding-left: 15px;
    transition: 0.2s;
    width: 335px;
    height: 32px;
    border: $border;
    border-radius: 3px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .h-cascader-input__inner {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &.placeholder {
        color: #c3cdda;
        user-select: none;
      }
    }
    .arrow-down {
      transition: 0.2s;
      margin-right: 8px;
      path {
        fill: $gray;
      }
    }
  }
  .h-cascader-dropdown {
    z-index: 999;
    background: #fff;
    user-select: none;
    min-width: 350px;
    position: absolute;
    transition: 0.25s ease;
    margin-top: 3px;
    box-shadow: 0 1px 4px 0 $gray;
    width: max-content;
    &.is-closed {
      opacity: 0;
      transform: scaleY(0);
      margin-top: -35%;
    }
    .h-cascader-dropdown__search {
      margin: 10px 20px 0 20px;
      outline: 0;
      padding-left: 20px;
      border: 0;
      border-bottom: 1px solid $gray;
      width: calc(100% - 40px);
      height: 32px;
      box-sizing: border-box;
      &:focus {
        border-bottom: 1px solid $green;
      }
    }
    .h-cascader-dropdown__group {
      height: 200px;
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      position: relative;
      &::before,
      &::after {
        position: absolute;
        content: '';
        width: calc(100% - 40px);
        margin: 0 20px;
        height: 1px;
        background: $gray;
      }
      &::before {
        top: calc(50% + 20px);
      }
      &::after {
        top: calc(50% - 20px);
      }
    }
    .h-cascader-dropdown__footer {
      padding: 8px 12px;
      text-align: right;
      border-top: $border;
      .h-cascader-button {
        cursor: pointer;
        border: none;
        border-radius: 3px;
        width: 54px;
        height: 24px;
        transition: 0.2s;
        &.button-clear {
          background: #fff;
          margin-right: 8px;
          &:hover {
            background: $green;
            color: #fff;
          }
        }
        &.button-confirm {
          background: $green;
          color: #fff;
          &:hover {
            background: #10a195;
          }
        }
      }
    }
    .h-cascader-list {
      box-sizing: border-box;
      width: 100%;
      min-width: fit-content;
      padding: 71.5px 0;
      margin: 10px 0;
      display: flex;
      flex-direction: column;

      &:not(.search-list) {
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */
        &::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
      }
      overflow-x: hidden;
      overflow-y: auto;
      &.search-list {
        padding: 0 0 0 20px;
        align-items: start;
        max-height: 250px;
        .is-active {
          color: $green;
        }
      }
      .h-cascader-list-item {
        margin: 8px 0;
        cursor: pointer;
        padding: 0 6px;
        text-align: center;
        &:not(.h-disabled) {
          &.is-selected {
            .h-cascader-list-item__label {
              background: rgba(15, 199, 184, 0.18);
            }
          }
          &:hover {
            .h-cascader-list-item__label {
              background: rgba(15, 199, 184, 0.12);
            }
          }
        }
        .h-cascader-list-item__label {
          width: fit-content;
          padding: 4px 8px;
        }
      }
    }
    .no-data {
      height: 200px;
      line-height: 200px;
      text-align: center;
      color: $gray;
    }
  }
}

.h-disabled {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
  .h-cascader-input {
    background: #f5f5f5;
  }
}
